<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/bootstrap.min.js">
			
		</script>
	</head>
	<body style="margin: 50px;">

	<button class="btn btn-default">左</button>
	<button class="btn btn-default">中</button>
	<button class="btn btn-default">右</button>
	<hr />

	<div class="btn-group">
		<button class="btn btn-default">左</button>
		<button class="btn btn-default">中</button>
		<button class="btn btn-default">右</button>
	</div>
	<hr />
	
	<div class="btn-toolbar">
		<div class="btn-group">
			<button class="btn btn-default">左</button>
			<button class="btn btn-default">中</button>
			<button class="btn btn-default">右</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-default">1</button>
			<button class="btn btn-default">2</button>
			<button class="btn btn-default">3</button>
		</div>
	</div> 
	<hr />

	<div class="btn-group btn-group-lg">
		<button type="button" class="btn btn-default">按钮 1</button>
		<button type="button" class="btn btn-default">按钮 2</button>
		<button type="button" class="btn btn-default">按钮 3</button>
	</div>
	
    <div class="btn-group btn-group-sm">
		<button type="button" class="btn btn-default">按钮 4</button>
		<button type="button" class="btn btn-default">按钮 5</button>
		<button type="button" class="btn btn-default">按钮 6</button>
	</div>
	
    <div class="btn-group btn-group-xs">
		<button type="button" class="btn btn-default">按钮 7</button>
		<button type="button" class="btn btn-default">按钮 8</button>
		<button type="button" class="btn btn-default">按钮 9</button>
	</div>
	<hr />
	
	<!-- 按钮组嵌套，即btn-group套btn-group -->
	<div class="btn-group">
		<button class="btn btn-default">左</button>
		<button class="btn btn-default">中</button>
		<button class="btn btn-default">右</button>
		
		<!-- div并没有设置class="dropdown" -->
		<!-- 通过源码分析知道嵌套本身已经有定位就不需要再设置 -->
		<div class="btn-group">
			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				下拉菜单<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li class="dropdown-header">网站导航</li>
				<li><a href="#">首页</a></li>
				<li><a href="#">资讯</a></li>
				<li class="divider"><a href="#">产品</a></li>
				<li class="disabled"><a href="#">关于</a></li>
			</ul>
		</div>		
	</div>

	<div class="btn-group">
		<button class="btn btn-default">左</button>
		<button class="btn btn-default">中</button>
		<button class="btn btn-default">右</button>
	</div> 
	<hr />

	<div class="btn-group-justified">
		<a class="btn btn-default">左</a>
		<a class="btn btn-default">中</a>
		<a class="btn btn-default">右</a>
	</div> 
	<hr />

	<div class="btn-group-justified">
		<div class="btn-group">
			<button class="btn btn-default">左</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-default">中</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-default">右</button>
		</div>
	</div> 
	<hr />

	<div class="btn-group">
		<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			下拉菜单<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li class="dropdown-header">网站导航</li>
			<li><a href="#">首页</a></li>
			<li><a href="#">资讯</a></li>
			<li class="divider"><a href="#">产品</a></li>
			<li class="disabled"><a href="#">关于</a></li>
		</ul>
	</div>
	<hr />

	<div class="btn-group">
		<button class="btn btn-default">下拉菜单</button>
		<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li class="dropdown-header">网站导航</li>
			<li><a href="#">首页</a></li>
			<li><a href="#">资讯</a></li>
			<li class="divider"><a href="#">产品</a></li>
			<li class="disabled"><a href="#">关于</a></li>
		</ul>
	</div>

	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</body>
</html>
